<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AssetVerify - 专业资产公证平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1E1E20',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 12px 0 rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 4px 20px 0 rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/95 shadow-sm">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="flex items-center">
                        <div class="bg-primary text-white p-2 rounded-lg mr-2">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-neutral-700">AssetVerify</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">首页</a>
                    <a href="create.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">创建资产</a>
                    <a href="register.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">资产上链</a>
                    <a href="query.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">查询资产</a>
                    <a href="transfer.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">转移资产</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="menu-toggle" class="text-neutral-600 hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-neutral-200">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">首页</a>
                <a href="create.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">创建资产</a>
                <a href="register.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">资产上链</a>
                <a href="query.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">查询资产</a>
                <a href="transfer.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">转移资产</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="pt-24 pb-16 bg-gradient-to-br from-primary/5 to-secondary/5">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-neutral-700 leading-tight text-shadow">
                        安全、透明的<br>
                        <span class="bg-clip-text text-transparent bg-gradient-primary">资产公证服务</span>
                    </h1>
                    <p class="mt-4 text-lg text-neutral-500 max-w-xl">
                        利用区块链技术，为您的资产提供不可篡改的公证服务，确保资产所有权的透明性和安全性。
                    </p>
                    <div class="mt-8 flex flex-wrap gap-4">
                        <a href="register.html" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-lg shadow-primary/20 transition-custom font-medium flex items-center">
                            <i class="fa fa-chain mr-2"></i> 资产上链
                        </a>
                        <a href="query.html" class="bg-white hover:bg-neutral-50 text-primary border border-primary px-6 py-3 rounded-lg transition-custom font-medium flex items-center">
                            <i class="fa fa-search mr-2"></i> 查询资产
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 relative">
                    <div class="relative z-10 rounded-xl overflow-hidden shadow-2xl">
                        <img src="https://picsum.photos/seed/blockchain/600/400" alt="区块链资产公证" class="w-full h-auto">
                        <div class="absolute inset-0 bg-gradient-to-t from-primary/40 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 p-6 text-white">
                            <h3 class="text-xl font-semibold">区块链技术保障</h3>
                            <p class="mt-2">每一笔资产交易都被永久记录，不可篡改</p>
                        </div>
                    </div>
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-secondary/20 rounded-full -z-10 blur-2xl"></div>
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-primary/20 rounded-full -z-10 blur-2xl"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 服务特性 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700">我们的服务特性</h2>
                <p class="mt-4 text-neutral-500 max-w-2xl mx-auto">
                    基于区块链技术，为您提供全方位的资产公证解决方案，确保资产安全可靠
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 特性卡片 1 -->
                <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-lock text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">安全可靠</h3>
                    <p class="text-neutral-500">
                        采用先进的区块链加密技术，确保您的资产信息不被篡改，提供最高级别的安全保障。
                    </p>
                </div>
                
                <!-- 特性卡片 2 -->
                <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-globe text-2xl text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">全球认可</h3>
                    <p class="text-neutral-500">
                        我们的公证服务在全球范围内得到认可，为您的资产提供国际化的法律保障。
                    </p>
                </div>
                
                <!-- 特性卡片 3 -->
                <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-bolt text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">高效便捷</h3>
                    <p class="text-neutral-500">
                        简化的操作流程，快速完成资产公证和转移，节省您的宝贵时间和精力。
                    </p>
                </div>
                
                <!-- 特性卡片 4 -->
                <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-eye text-2xl text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">全程透明</h3>
                    <p class="text-neutral-500">
                        所有资产交易记录都可以被追溯和验证，确保整个过程的透明度和公正性。
                    </p>
                </div>
                
                <!-- 特性卡片 5 -->
                <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-file-text text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">法律效力</h3>
                    <p class="text-neutral-500">
                        我们的公证服务符合国际法律标准，具有完全的法律效力，为您的资产提供法律保障。
                    </p>
                </div>
                
                <!-- 特性卡片 6 -->
                <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6">
                        <i class="fa fa-handshake-o text-2xl text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-neutral-700 mb-3">专业支持</h3>
                    <p class="text-neutral-500">
                        我们拥有专业的法律和技术团队，随时为您提供专业的咨询和支持服务。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 服务流程 -->
    <section class="py-16 bg-neutral-100">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700">服务流程</h2>
                <p class="mt-4 text-neutral-500 max-w-2xl mx-auto">
                    简单几步，完成您的资产公证和管理
                </p>
            </div>
            
            <div class="relative">
                <!-- 连接线 -->
                <div class="hidden md:block absolute top-1/2 left-0 w-full h-1 bg-primary/20 -translate-y-1/2 z-0"></div>
                
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
                    <!-- 步骤 1 -->
                    <div class="bg-white rounded-xl p-6 shadow-card text-center transition-custom hover:translate-y-[-8px]">
                        <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6">
                            <span class="text-2xl font-bold">1</span>
                        </div>
                        <h3 class="text-xl font-semibold text-neutral-700 mb-3">创建资产</h3>
                        <p class="text-neutral-500">
                            填写资产的基本信息，包括资产ID、所有者、名称和详细描述
                        </p>
                        <a href="create.html" class="mt-4 inline-block text-primary hover:text-primary/80 font-medium">
                            立即创建 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    
                    <!-- 步骤 2 -->
                    <div class="bg-white rounded-xl p-6 shadow-card text-center transition-custom hover:translate-y-[-8px]">
                        <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6">
                            <span class="text-2xl font-bold">2</span>
                        </div>
                        <h3 class="text-xl font-semibold text-neutral-700 mb-3">资产上链</h3>
                        <p class="text-neutral-500">
                            将您的资产信息加密后上传至区块链，生成不可篡改的记录
                        </p>
                        <a href="register.html" class="mt-4 inline-block text-primary hover:text-primary/80 font-medium">
                            资产上链 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    
                    <!-- 步骤 3 -->
                    <div class="bg-white rounded-xl p-6 shadow-card text-center transition-custom hover:translate-y-[-8px]">
                        <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6">
                            <span class="text-2xl font-bold">3</span>
                        </div>
                        <h3 class="text-xl font-semibold text-neutral-700 mb-3">查询验证</h3>
                        <p class="text-neutral-500">
                            通过资产ID随时查询资产信息，验证资产的真实性和所有权
                        </p>
                        <a href="query.html" class="mt-4 inline-block text-primary hover:text-primary/80 font-medium">
                            查询资产 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    
                    <!-- 步骤 4 -->
                    <div class="bg-white rounded-xl p-6 shadow-card text-center transition-custom hover:translate-y-[-8px]">
                        <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6">
                            <span class="text-2xl font-bold">4</span>
                        </div>
                        <h3 class="text-xl font-semibold text-neutral-700 mb-3">资产转移</h3>
                        <p class="text-neutral-500">
                            安全、便捷地完成资产所有权的转移，记录全程可追溯
                        </p>
                        <a href="transfer.html" class="mt-4 inline-block text-primary hover:text-primary/80 font-medium">
                            转移资产 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据统计 -->
    <section class="py-16 bg-gradient-primary text-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
                <div class="p-6">
                    <div class="text-4xl font-bold mb-2">10,000+</div>
                    <p class="text-white/80">已公证资产</p>
                </div>
                <div class="p-6">
                    <div class="text-4xl font-bold mb-2">99.99%</div>
                    <p class="text-white/80">系统可用性</p>
                </div>
                <div class="p-6">
                    <div class="text-4xl font-bold mb-2">5分钟</div>
                    <p class="text-white/80">平均处理时间</p>
                </div>
                <div class="p-6">
                    <div class="text-4xl font-bold mb-2">100+</div>
                    <p class="text-white/80">合作机构</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 资产示例 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700">资产示例</h2>
                <p class="mt-4 text-neutral-500 max-w-2xl mx-auto">
                    以下是我们平台上已公证的部分资产示例
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 资产卡片 1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/seed/asset1/600/400" alt="数字艺术品" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-xl font-semibold text-neutral-700">数字艺术品《星云》</h3>
                                <p class="text-neutral-500 mt-1">ID: ART-20250515-001</p>
                            </div>
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">已上链</span>
                        </div>
                        <p class="text-neutral-600 mb-6">
                            这是一幅由著名数字艺术家创作的限量版艺术品，区块链确保其唯一性和版权归属。
                        </p>
                        <div class="flex items-center text-neutral-500 text-sm mb-6">
                            <div class="flex items-center mr-4">
                                <i class="fa fa-user-circle-o mr-1"></i>
                                <span>张三</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i>
                                <span>2025-05-15</span>
                            </div>
                        </div>
                        <a href="query.html" class="block w-full text-center bg-neutral-100 hover:bg-neutral-200 text-neutral-700 py-3 rounded-lg transition-custom font-medium">
                            查看详情
                        </a>
                    </div>
                </div>
                
                <!-- 资产卡片 2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/seed/asset2/600/400" alt="专利技术" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-xl font-semibold text-neutral-700">智能合约优化技术</h3>
                                <p class="text-neutral-500 mt-1">ID: TECH-20250422-015</p>
                            </div>
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">已上链</span>
                        </div>
                        <p class="text-neutral-600 mb-6">
                            一种新型智能合约优化技术，可提高区块链交易效率300%，已获得国际专利。
                        </p>
                        <div class="flex items-center text-neutral-500 text-sm mb-6">
                            <div class="flex items-center mr-4">
                                <i class="fa fa-user-circle-o mr-1"></i>
                                <span>科创有限公司</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i>
                                <span>2025-04-22</span>
                            </div>
                        </div>
                        <a href="query.html" class="block w-full text-center bg-neutral-100 hover:bg-neutral-200 text-neutral-700 py-3 rounded-lg transition-custom font-medium">
                            查看详情
                        </a>
                    </div>
                </div>
                
                <!-- 资产卡片 3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-custom border border-neutral-200">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/seed/asset3/600/400" alt="房地产" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-xl font-semibold text-neutral-700">海景别墅</h3>
                                <p class="text-neutral-500 mt-1">ID: REAL-20250318-008</p>
                            </div>
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">已上链</span>
                        </div>
                        <p class="text-neutral-600 mb-6">
                            位于海滨度假区的豪华别墅，占地面积500平方米，拥有私人泳池和花园。
                        </p>
                        <div class="flex items-center text-neutral-500 text-sm mb-6">
                            <div class="flex items-center mr-4">
                                <i class="fa fa-user-circle-o mr-1"></i>
                                <span>李四</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-calendar mr-1"></i>
                                <span>2025-03-18</span>
                            </div>
                        </div>
                        <a href="query.html" class="block w-full text-center bg-neutral-100 hover:bg-neutral-200 text-neutral-700 py-3 rounded-lg transition-custom font-medium">
                            查看详情
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <a href="query.html" class="inline-flex items-center justify-center bg-white border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg transition-custom font-medium">
                    查看更多资产 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 常见问题 -->
    <section class="py-16 bg-neutral-100">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700">常见问题</h2>
                <p class="mt-4 text-neutral-500 max-w-2xl mx-auto">
                    解答您在使用资产公证服务过程中可能遇到的问题
                </p>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <div class="space-y-4">
                    <!-- FAQ 项目 1 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium text-neutral-700 hover:bg-neutral-50 transition-custom">
                            <span>什么是资产公证？</span>
                            <i class="fa fa-plus text-primary transition-transform"></i>
                        </button>
                        <div class="faq-content hidden p-6 pt-0 border-t border-neutral-100">
                            <p class="text-neutral-600">
                                资产公证是利用区块链技术，将您的资产信息加密后存储在区块链上，形成不可篡改的记录。这种方式确保了资产的真实性、所有权和交易历史的透明性，为您的资产提供法律认可的证明。
                            </p>
                        </div>
                    </div>
                    
                    <!-- FAQ 项目 2 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium text-neutral-700 hover:bg-neutral-50 transition-custom">
                            <span>资产公证的流程是怎样的？</span>
                            <i class="fa fa-plus text-primary transition-transform"></i>
                        </button>
                        <div class="faq-content hidden p-6 pt-0 border-t border-neutral-100">
                            <p class="text-neutral-600">
                                资产公证流程包括：创建资产信息、上传必要证明文件、验证信息真实性、将资产信息加密上链、生成公证证书。整个过程通常在5-10分钟内完成，具体时间取决于资产类型和验证难度。
                            </p>
                        </div>
                    </div>
                    
                    <!-- FAQ 项目 3 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium text-neutral-700 hover:bg-neutral-50 transition-custom">
                            <span>如何查询我的资产信息？</span>
                            <i class="fa fa-plus text-primary transition-transform"></i>
                        </button>
                        <div class="faq-content hidden p-6 pt-0 border-t border-neutral-100">
                            <p class="text-neutral-600">
                                您可以通过资产ID在我们的平台上查询资产信息。每个资产都有唯一的ID，您可以在资产创建成功后获得。查询时，您可以查看资产的基本信息、上链时间、所有权历史等详细记录。
                            </p>
                        </div>
                    </div>
                    
                    <!-- FAQ 项目 4 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium text-neutral-700 hover:bg-neutral-50 transition-custom">
                            <span>资产转移需要什么条件？</span>
                            <i class="fa fa-plus text-primary transition-transform"></i>
                        </button>
                        <div class="faq-content hidden p-6 pt-0 border-t border-neutral-100">
                            <p class="text-neutral-600">
                                资产转移需要当前所有者发起转移请求，并提供接收方的有效身份信息。转移过程需要双方确认，并在区块链上记录。某些特殊资产可能需要额外的法律文件或第三方认证。
                            </p>
                        </div>
                    </div>
                    
                    <!-- FAQ 项目 5 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-medium text-neutral-700 hover:bg-neutral-50 transition-custom">
                            <span>我们的公证服务具有法律效力吗？</span>
                            <i class="fa fa-plus text-primary transition-transform"></i>
                        </button>
                        <div class="faq-content hidden p-6 pt-0 border-t border-neutral-100">
                            <p class="text-neutral-600">
                                是的，我们的公证服务符合国际和国内相关法律法规，具有完全的法律效力。我们与多家法律机构合作，确保我们的服务和流程合法合规。我们的公证证书可以在法庭上作为有效证据使用。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700 mb-4">联系我们</h2>
                    <p class="text-neutral-500 mb-8">
                        如有任何疑问或需要帮助，请随时联系我们的客服团队，我们将竭诚为您服务。
                    </p>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
                                <i class="fa fa-map-marker text-xl text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-neutral-700">公司地址</h3>
                                <p class="text-neutral-500 mt-1">北京市海淀区中关村科技园区8号楼15层</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
                                <i class="fa fa-envelope text-xl text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-neutral-700">电子邮箱</h3>
                                <p class="text-neutral-500 mt-1">contact@assetverify.com</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
                                <i class="fa fa-phone text-xl text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-neutral-700">联系电话</h3>
                                <p class="text-neutral-500 mt-1">+86 10 8888 8888</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
                                <i class="fa fa-clock-o text-xl text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-neutral-700">工作时间</h3>
                                <p class="text-neutral-500 mt-1">周一至周五: 9:00 - 18:00</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-8 flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary/20 text-primary rounded-full flex items-center justify-center transition-custom">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary/20 text-primary rounded-full flex items-center justify-center transition-custom">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary/20 text-primary rounded-full flex items-center justify-center transition-custom">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-primary/10 hover:bg-primary/20 text-primary rounded-full flex items-center justify-center transition-custom">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-card p-8 border border-neutral-200">
                    <h3 class="text-xl font-semibold text-neutral-700 mb-6">发送消息</h3>
                    <form>
                        <div class="mb-4">
                            <label for="name" class="block text-sm font-medium text-neutral-700 mb-1">姓名</label>
                            <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入您的姓名">
                        </div>
                        
                        <div class="mb-4">
                            <label for="email" class="block text-sm font-medium text-neutral-700 mb-1">邮箱</label>
                            <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入您的邮箱">
                        </div>
                        
                        <div class="mb-4">
                            <label for="subject" class="block text-sm font-medium text-neutral-700 mb-1">主题</label>
                            <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入消息主题">
                        </div>
                        
                        <div class="mb-6">
                            <label for="message" class="block text-sm font-medium text-neutral-700 mb-1">消息内容</label>
                            <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom resize-none" placeholder="请输入您的消息内容"></textarea>
                        </div>
                        
                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-lg transition-custom font-medium">
                            发送消息
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-neutral-800 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center mb-6">
                        <div class="bg-primary text-white p-2 rounded-lg mr-2">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">AssetVerify</span>
                    </div>
                    <p class="text-neutral-400 mb-6">
                        专业的区块链资产公证平台，为您的资产提供安全、透明、可信的公证服务。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="text-neutral-400 hover:text-white transition-custom">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-neutral-400 hover:text-white transition-custom">首页</a></li>
                        <li><a href="create.html" class="text-neutral-400 hover:text-white transition-custom">创建资产</a></li>
                        <li><a href="register.html" class="text-neutral-400 hover:text-white transition-custom">资产上链</a></li>
                        <li><a href="query.html" class="text-neutral-400 hover:text-white transition-custom">查询资产</a></li>
                        <li><a href="transfer.html" class="text-neutral-400 hover:text-white transition-custom">转移资产</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">服务支持</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">帮助中心</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">常见问题</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">使用教程</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">法律条款</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-white transition-custom">隐私政策</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">北京市海淀区中关村科技园区8号楼15层</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">contact@assetverify.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">+86 10 8888 8888</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-clock-o mt-1 mr-3 text-neutral-400"></i>
                            <span class="text-neutral-400">周一至周五: 9:00 - 18:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-neutral-700 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-neutral-500 text-sm">
                        &copy; 2025 AssetVerify. 保留所有权利。
                    </p>
                    <div class="mt-4 md:mt-0">
                        <ul class="flex space-x-6">
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">隐私政策</a></li>
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">服务条款</a></li>
                            <li><a href="#" class="text-neutral-500 hover:text-white text-sm transition-custom">Cookie政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('bg-white/95');
                navbar.classList.add('bg-white');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('bg-white/95');
                navbar.classList.remove('bg-white');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // FAQ 切换效果
        document.querySelectorAll('.faq-toggle').forEach(toggle => {
            toggle.addEventListener('click', () => {
                const content = toggle.nextElementSibling;
                const icon = toggle.querySelector('i');
                
                content.classList.toggle('hidden');
                if (!content.classList.contains('hidden')) {
                    icon.classList.add('fa-rotate-45');
                } else {
                    icon.classList.remove('fa-rotate-45');
                }
            });
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
    